<template>
	<div id="app">
		<el-row>

			<el-col :span="24">
				<el-form :model="queryWhere" :inline="true">
					<el-form-item>
						<el-button type="primary" @click="dialogFormVisible = true,getCatList()"
							style="margin-left: -700px">新增</el-button>
					</el-form-item>
					<el-form-item label="类别名称">
						<el-input v-model="queryWhere.catsname"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="initTableDataByname">查询</el-button>
					</el-form-item>
				</el-form>

			</el-col>
		</el-row>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>
		<el-table :data="cats" stripe border style="width: 100%">

			<!-- 			<el-table-column label="可用状态" prop="flag">
				<template slot-scope="scope">
					<el-switch v-model="scope.row" @change="memberStatusChanged(scope.row)">
					</el-switch>
				</template> -->
			</el-table-column>
			<el-table-column style="" prop="cat_name" label="类别名称" min-width="25%"></el-table-column>
			<el-table-column prop="cat_level" label="类别级别" min-width="25%"></el-table-column>
			<el-table-column prop="cat_icon" label="类别图标" min-width="25%">
				<template slot-scope="scope">
					<el-image style="width: 50px; height: 50px" :src="scope.row.cat_icon" fit="fill"></el-image>
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="primary" @click="editData(scope),getCatList()">修改</el-button>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="primary" @click="deleteCat(scope)">删除</el-button>
				</template>
			</el-table-column>

		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>

		<!-- 添加商品的form表单 -->
		<el-dialog title="添加商品" :visible.sync="dialogFormVisible">
			<el-form :model="addcatsInfo" label-width="100px">
				<!-- <el-form-item label="商品编号" >
           <el-input v-model="goodsInfo.goods_id" ></el-input>
         </el-form-item> -->
				<el-form-item label="类别名称">
					<el-input v-model="addcatsInfo.cat_name"></el-input>
				</el-form-item>
				<el-form-item label="类别级别">
					<el-input v-model="addcatsInfo.cat_level"></el-input>
				</el-form-item>
				<el-form-item label="类别图标">
					<el-input v-model="addcatsInfo.cat_icon"></el-input>
				</el-form-item>

				<el-form-item>
					<el-upload class="avatar-uploader" action="http://localhost:8080/api/mall/OSSFileUploadServlet"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<!--判断data中的imgUrl是否为空，不为空则显示imgUrl-->
						<img v-if="addcatsInfo.cat_icon" :src="addcatsInfo.cat_icon" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCats()">确 定</el-button>
			</div>

		</el-dialog>

		<el-dialog title="提示" :visible="dialogVisible" width="1024" :before-close="handleClose">
			<!-- 修改的dialog -->
			<el-form :model="catsInfo" label-width="100px">
				<!-- <el-form-item label="商品编号" >
             <el-input v-model="goodsInfo.goods_id" ></el-input>
           </el-form-item> -->
				<el-form-item label="类别名称">
					<el-input v-model="catsInfo.cat_name"></el-input>
				</el-form-item>
				<el-form-item label="类别级别">
					<el-input v-model="catsInfo.cat_level"></el-input>
				</el-form-item>
				<el-form-item label="类别图标">
					<el-input v-model="catsInfo.cat_icon"></el-input>
				</el-form-item>

				<el-form-item>
					<el-upload class="avatar-uploader" action="http://localhost:8080/api/mall/OSSFileUploadServlet"
						:show-file-list="false" :on-success="updatehandleAvatarSuccess"
						:before-upload="beforeAvatarUpload">
						<!--判断data中的imgUrl是否为空，不为空则显示imgUrl-->
						<img v-if="catsInfo.cat_icon" :src="catsInfo.cat_icon" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateCats">确 定</el-button>
			</div>

		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'App',
		mounted: function() {
			this.initTableData();
		},
		created: function() {
			this.access_token = window.sessionStorage.getItem("token");
		},
		computed: {},
		methods: {
			// 查询的时候强制当前页为1的方法
			initTableDataByname() {
				this.queryWhere.currentPage = 1;

				this.initTableData();
			},
			// 添加商品信息
			addCats() {
				let _this = this;
				console.log("新增的cats", this.addcatsInfo);
				let url = "/api/mall/CatsServlet.do?method=insert"
				this.$http.get(url, {
					params: this.addcatsInfo
				}).then(function(response) {
					if (response.data.code == 0) {
						//关闭Dialog
						_this.dialogFormVisible = false;
						//重新刷新表格数据
						_this.initTableData();
					}
				}).catch(function(response) {
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			// 添加新数据
			addData() {
				this.dialogFormVisible = true; //显示弹出框
				// this.goodsInfo = {};
			},
			// 确认弹窗是否关闭
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						this.dialogVisible = false;
					})
					.catch(_ => {});
			},
			// 删除功能
			deleteCat(scope) {
				let _this = this;
				this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// console.log("scope的cat_id:",scope.row.cat_id);
					// for(let attr in this.catsInfo){
					//   this.catsInfo[attr]= scope.row[attr]
					// }
					let _this = this;
					let url = "/api/mall/CatsServlet.do?method=delete&cat_id=" + scope.row.cat_id;
					this.$http.get(url).
					then(function(response) {
						if (response.data.code == 0) {
							console.log("删除成功")
							_this.$message({
								type: 'success',
								message: '删除成功!',
							});
							//重新刷新表格数据
							_this.initTableData();
						}
					}).catch(function(error) {
						_this.$notify({
							title: '提示',
							message: "系统错误:" + error,
							duration: 2000
						});
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			// 确认修改信息
			updateCats() {
				let _this = this;
				console.log("修改的cats", this.catsInfo);
				let url = "/api/mall/CatsServlet.do?method=update"
				this.$http.get(url, {
					params: this.catsInfo
				}).then(function(response) {
					if (response.data.code == 0) {
						//关闭Dialog
						_this.dialogVisible = false;
						//重新刷新表格数据
						_this.initTableData();
						//把修改后的数据更新到表格中
						// for(let attr in _this.goodsInfo){
						//    _this.currentEditCatsInfo[attr]= _this.goodsInfo[attr]
						// }
					}
				}).catch(function(response) {
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			editData: function(scope) { //点击修改按钮调用的函数
				this.currentEditCatsInfo = scope
					.row; ////把当前修改的书刊赋给currentEditCatsInfo,目的是在修改成功时，把catsInfo中的数据替换currentEditCatsInfo
				this.dialogVisible = true; //显示弹出框
				console.log("修改中的", this.cats);
				console.log("修改的", scope.row);
				for (let attr in this.catsInfo) {
					this.catsInfo[attr] = scope.row[attr]
				}
			},
			handleAvatarSuccess: function(res, file) {
				console.log("res值：", res);
				if (res.code == 0) {
					//取出图片的url地址
					//res.data;
					this.addcatsInfo.cat_icon = res.data;
				}
				console.log("file值：", file);
				//文件 选择成功  成功的回调
				// this.imageUrl = URL.createObjectURL(file.raw);
			},
			updatehandleAvatarSuccess: function(res, file) {
				console.log("res值：", res);
				if (res.code == 0) {
					//取出图片的url地址
					//res.data;
					this.catsInfo.cat_icon = res.data;
				}
				console.log("file值：", file);
				//文件 选择成功  成功的回调
				// this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload: function(file) {
				//文件上传前对文件的大小和类型做检查
				const isJPG = file.type.indexOf('image') >= 0 ? true : false;
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG) {
					this.$message.error('只能上传图片!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},

			initTableData: function() {
				let _this = this;
				let url = "/api/mall/CatsServlet.do?method=queryByPage&access_token=" + this.access_token;


				this.$http.get(url, {
					params: _this.queryWhere
				}).then(function(response) {
					if (response.data.code == 0) {
						_this.queryWhere.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;

						_this.pageInfo.pageSize = response.data.data.pageSize;

						_this.cats = response.data.data.data;
						// console.log("类别",_this.cats)
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},

			handleSizeChange: function(pageSize) {
				//alert("修改了每页显示的记录数",val);
				//console.log("修改了每页显示的记录数",val)
				this.queryWhere.pageSize = pageSize;
				this.initTableData(); //重新查数据库。。
			},
			handleCurrentChange: function(curPage) {
				this.queryWhere.currentPage = curPage; //当前页
				this.initTableData(); //重新查数据库。。
			}
		},
		data: function() {
			return {
				//记录token
				access_token: "",
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '60px',
				currentEditCatsInfo: [],
				// 是否上架列表
				isSale: [{
					value: 1,
					label: '上架'
				}, {
					value: 0,
					label: '下架'
				}],
				cats: [],
				// 修改的
				catsInfo: {
					cat_id: "",
					cat_name: "",
					cat_id: "",
					cat_level: "",
					cat_icon: "",
				},
				addcatsInfo: {
					cat_id: "",
					cat_name: "",
					cat_id: "",
					cat_level: "",
					cat_icon: "",
				},
				dialogVisible: false, //用于控制弹出框是显示还是隐藏。
				dialogFormVisible: false, // 显示增加表格的
				queryWhere: {
					catsname: "",
					currentPage: 1,
					pageSize: 5
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},
			}
		},
	}
</script>

<style>
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}


	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
